<template>
	<view>
		<view class="formInfo">
			<u--form class="item" style="padding: 0 20rpx;" label-width="auto" :model="fromData" :rules="rules"
				ref="uForm">
				<view>
					<u-icon name="order" color="#1573FF" label="借调信息" labelColor="#333333"></u-icon>
					<u-line color="#efefef" margin="20rpx 0 0"></u-line>
				</view>

				<u-form-item label="借调类型" required prop="type">
					<uni-data-checkbox v-model="fromData.type" :localdata="secondedType" />
				</u-form-item>

				<u-form-item label="调出门店" @click="showStore1=true" required prop="bringStoreName">
					<u--input v-model="fromData.bringStoreName" inputAlign="right" placeholder="请选择调出门店" border="none"
						disabled disabledColor="#ffffff">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				
				<u-form-item v-if="fromData.type == 1" label="调入门店" @click="showStore2 = true" required prop="callStoreName">
					<u--input v-model="fromData.callStoreName" inputAlign="right" placeholder="请选择调入门店" border="none"
						disabled disabledColor="#ffffff">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				
				<u-form-item v-else label="调入门店" required prop="callStoreName">
					<u--input v-model="fromData.callStoreName" inputAlign="right" placeholder="请输入调入门店" border="none">
					</u--input>
				</u-form-item>
				
				<u-form-item label="借调车辆" @click="chooseCar" required prop="carNo">
					<u--input v-model="fromData.carNo" inputAlign="right" placeholder="请选择借调车辆" border="none" disabled
						disabledColor="#ffffff">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				
				<u-form-item label="调出时间" @click="showSecondedOutTime = true" required prop="bringTime">
					<u--input v-model="fromData.bringTime" inputAlign="right" placeholder="请选择调出时间" border="none"
						disabled disabledColor="#ffffff">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				
				<u-form-item label="借调开始时间" @click="showStartTime = true" required prop="startTime">
					<u--input v-model="fromData.startTime" inputAlign="right" placeholder="请选择借调开始时间" border="none"
						disabled disabledColor="#ffffff">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				
				<u-form-item label="借调结束时间" @click="showEndTime = true" required prop="endTime">
					<u--input v-model="fromData.endTime" inputAlign="right" placeholder="请选择借调结束时间" border="none"
						disabled disabledColor="#ffffff">
					</u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item v-if="fromData.type == 2" label="借调费用" required prop="cost">
					<u--input v-model="fromData.cost" inputAlign="right" placeholder="请输入借调费用" border="none" type="digit">
					</u--input>
				</u-form-item>

				<u-form-item v-if="fromData.type == 2" label="是否已结算" required prop="isPay">
					<uni-data-checkbox v-model="fromData.isPay" :localdata="billType" />
				</u-form-item>

				<u-form-item label="收车人" required prop="collectPerson">
					<u--input v-model="fromData.collectPerson" inputAlign="right" placeholder="请输入收车人" border="none">
					</u--input>
				</u-form-item>

				<u-form-item label="联系电话" required prop="phone">
					<u--input v-model="fromData.phone" inputAlign="right" placeholder="请输入联系电话" border="none" type="number" maxlength="11">
					</u--input>
				</u-form-item>
				
				<u-form-item label="备注" prop="remark">
					<u--textarea v-model="fromData.remark" placeholder="请输入备注" ></u--textarea>
				</u-form-item>

			</u--form>

		</view>

		<view class="bottom" @click="addCarSeconded">
			<text>新增借调</text>
		</view>



		<!-- 调出门店 -->
		<u-picker :show="showStore1" :columns="storeList" keyName="name" closeOnClickOverlay @close="showStore1=false"
			@cancel="showStore1=false" title="调出门店" confirmColor="#1573FF" @confirm="confimStore1">
		</u-picker>
		<!-- 调入门店 -->
		<u-picker :show="showStore2" :columns="storeList" keyName="name" closeOnClickOverlay @close="showStore2=false"
			@cancel="showStore2=false" title="调入门店" confirmColor="#1573FF" @confirm="confimStore2">
		</u-picker>

		<!-- 调出时间 -->
		<u-datetime-picker v-model="currentDate" ref="datetimePicker" closeOnClickOverlay :show="showSecondedOutTime"
			@close="showSecondedOutTime=false" @cancel="showSecondedOutTime=false" :formatter="formatter" mode="datetime"
			title="调出时间" confirmColor="#1573FF" @confirm="confimOutTime"></u-datetime-picker>

		<!-- 开始时间 -->
		<u-datetime-picker v-model="currentDate" ref="datetimePicker" closeOnClickOverlay :show="showStartTime"
			@close="showStartTime=false" @cancel="showStartTime=false" :formatter="formatter" mode="datetime" title="借调开始时间"
			confirmColor="#1573FF" @confirm="confimStartTime()"></u-datetime-picker>
		<!-- 结束时间 -->
		<u-datetime-picker v-model="currentDate" ref="datetimePicker" closeOnClickOverlay :show="showEndTime"
			@close="showEndTime=false" @cancel="showEndTime=false" :formatter="formatter" mode="datetime" title="借调结束时间"
			confirmColor="#1573FF" @confirm="confimEndTime()"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		apiInsertSecondment
	} from '@/api/car-api.js'
	var moment = require('@/utils/moment.js');
	export default {
		data() {
			return {
				secondedType: [{
					"value": 1,
					"text": "内部借调"
				}, {
					"value": 2,
					"text": "同行借调"
				}],

				billType: [{
					"value": 1,
					"text": "是"
				}, {
					"value": 2,
					"text": "否"
				}],
				showStore1: false,
				showStore2: false,
				showSecondedOutTime: false,
				showStartTime: false,
				showEndTime: false,
				currentDate: moment(),
				fromData: {
					type: 1,
					bringStore: '',
					bringStoreName: '',
					carId: '',
					carNo: '',
					bringTime: '',
					callStore: '',
					callStoreName: '',
					startTime: '',
					endTime: '',
					collectPerson: '',
					phone: '',
					cost: '',
					isPay: 2,
					remark : ''
				},
				rules: {
					bringStoreName: {
						type: 'string',
						min: 1,
						required: true,
						message: '请填写调出门店',
						trigger: ['change']
					},
					callStoreName: {
						type: 'string',
						min: 1,
						required: true,
						message: '请填写调入门店',
						trigger: ['change']
					},
					carNo: {
						type: 'string',
						required: true,
						message: '请选择借调车辆',
						trigger: ['change']
					},
					bringTime: {
						type: 'string',
						required: true,
						message: '请选择调出时间',
						trigger: ['change']
					},
					startTime: {
						type: 'string',
						min: 1,
						required: true,
						message: '请选择借调开始时间',
						trigger: ['change']
					},
					endTime: {
						type: 'string',
						min: 2,
						required: true,
						message: '请选择借调结束时间',
						trigger: ['change']
					},
					cost: {
						type: 'string',
						min: 1,
						required: true,
						message: '请输入借调费用',
						trigger: ['blur', 'change']
					},
					collectPerson: {
						type: 'string',
						min: 1,
						required: true,
						message: '请输入收车人',
						trigger: ['change']
					},
					phone: {
						type: 'string',
						min: 1,
						required: true,
						message: '请输入联系电话',
						trigger: ['change']
					},
				}

			}
		},
		computed: {
			storeList() {
				var result = [this.$store.state.initData.initData.storeList];
				return result;
			}
		},
		onLoad() {
			uni.$on('chooseCar', (car) => {
				this.fromData.carId = car.id;
				this.fromData.carNo = car.carNo;
			})
		},
		methods: {
			//借调类型改变监听
			typeGroupChange(n) {
				if (n == '内部借调') {
					this.fromData.type = 1;
				} else {
					this.fromData.type = 2;
				}
			},

			// 结算状态改变监听
			billGroupChange(n) {
				if (n == '是') {
					this.fromData.isPay = 1;
				} else {
					this.fromData.isPay = 2;
				}
			},



			//调出门店
			confimStore1(e) {
				this.fromData.bringStore = e.value[0].id;
				this.fromData.bringStoreName = e.value[0].name;
				this.showStore1 = false;
			},
			//调入门店
			confimStore2(e) {
				this.fromData.callStore = e.value[0].id;
				this.fromData.callStoreName = e.value[0].name;
				this.showStore2 = false;
			},
			// 借调车辆
			chooseCar() {
				uni.navigateTo({
					url: './car-list'
				})
			},
			// 调出时间
			confimOutTime(e) {
				this.fromData.bringTime = moment(e.value).format('YYYY-MM-DD HH:mm:ss');
				this.showSecondedOutTime = false;
			},
			// 开始时间
			confimStartTime(e) {
				this.fromData.startTime = moment(e.value).format('YYYY-MM-DD HH:mm:ss');
				this.showStartTime = false;
			},
			// 结束时间
			confimEndTime(e) {
				this.fromData.endTime = moment(e.value).format('YYYY-MM-DD HH:mm:ss');
				this.showEndTime = false;
			},


			//新增车辆借调
			addCarSeconded() {
				let that = this;
				this.$refs.uForm.validate().then(res => {
					
					if(this.fromData.type == 2 && !uni.$u.test.mobile(this.fromData.phone)){
					  this.$u.toast("手机号格式不正确");
					  return
					}
					
					uni.showModal({
						title: '提示',
						content: '确认添加车辆借调吗?',
						cancelText: '取消',
						confirmText: '确定',
						success: function(res1) {
							if (res1.confirm) {
								uni.showLoading({
									title: "提交中...",
									mask: true
								});
								apiInsertSecondment(that.fromData).then(res2 => {
									uni.hideLoading();
									if (res2.code == 200) {
										uni.$u.toast('提交成功')
										uni.navigateBack({

										})
									}
								}).catch(errors => {
									uni.$u.toast(errors)
								})
							} else {
								console.log('取消');
							}

						}
					})
				})

			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				if (type === 'second') {
					return `${value}秒`
				}
				return value
			},

		}
	}
</script>

<style lang="scss" scoped>
	.cerBox {
		display: flex;

	}
</style>
